@import 'element-plus/dist/index.css';

:root {
  /* 明亮主题 */
  --main-bg: #f6f8fa;
  --card-bg: #ffffff;
  --text-primary: #24292f;
  --text-secondary: #57606a;
  --border-color: #d0d7de;
  --highlight: #0969da;
  --tag-bg: #f6f8fa;
  --tag-text: #57606a;
  --header-bg: #ffffff;
  --shadow: rgba(0, 0, 0, 0.1);
  --text-primary-color: #303133;
  --text-secondary-color: #909399;
  --text-hover-color: #409eff;
  --text-active-color: #66b1ff;
}


.dark-theme {
  /* 暗色主题 - 调整为更深的黑色 */
  --main-bg: #000000;  /* 纯黑背景 */
  --card-bg: #1a1a1a;  /* 深色卡片背景 */
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --border-color: #2f2f2f;
  --highlight: #4f9eff;
  --tag-bg: #2a2a2a;
  --tag-text: #a0a0a0;
  --header-bg: #1a1a1a;
  --shadow: rgba(0, 0, 0, 0.5);
  --text-primary-color: #e4e7ed;
  --text-secondary-color: #c0c4cc;
  --text-hover-color: #409eff;
  --text-active-color: #66b1ff;
}

/* 全局背景和文字 */
body {
  background: var(--main-bg);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 导航栏 */
.navbar {
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s ease;
}

/* 文章卡片 */
.article-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 2px 8px var(--shadow) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 按钮悬停效果 */
.el-button--primary:hover {
  opacity: 0.9;
}

/* 标签样式 */
.el-tag {
  background: var(--tag-bg) !important;
  border: 1px solid var(--border-color) !important;
  transition: background-color 0.3s ease;
}

/* 侧边栏卡片 */
.sidebar-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  transition: background-color 0.3s ease;
}

/* 菜单样式 */
.el-menu {
  background: transparent !important;
  border-bottom: none !important;
}

.el-menu-item, .el-sub-menu__title {
  color: var(--text-primary) !important;
  transition: color 0.3s ease !important;
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  background: var(--tag-bg) !important;
}

/* 链接颜色 */
a {
  color: var(--highlight);
  transition: color 0.3s ease;
}

a:hover {
  opacity: 0.8;
}

/* Element Plus 暗色主题覆盖 */
.dark-theme .el-menu--popup-container {
  background-color: var(--card-bg) !important;
}

.dark-theme .el-menu--horizontal .el-sub-menu__title {
  color: var(--text-primary) !important;
}

.dark-theme .el-menu--horizontal .el-menu-item {
  color: var(--text-primary) !important;
}

.dark-theme .el-menu--horizontal .el-menu-item:hover {
  background-color: var(--tag-bg) !important;
}

.dark-theme .el-menu--horizontal .el-menu-item.is-active {
  color: var(--highlight) !important;
  border-bottom-color: var(--highlight) !important;
}

.dark-theme .el-popper.is-light {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

.dark-theme .el-popper.is-light .el-popper__arrow::before {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* 下拉菜单样式 */
.el-popper.is-pure {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Element Plus 下拉菜单主题样式 */
.el-menu--popup {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

.el-menu--popup .el-menu-item,
.el-menu--popup .el-sub-menu__title {
  color: var(--text-primary) !important;
  background-color: var(--card-bg) !important;
}

.el-menu--popup .el-menu-item:hover,
.el-menu--popup .el-sub-menu__title:hover {
  background-color: var(--tag-bg) !important;
}

.el-menu--popup .el-menu-item.is-active {
  color: var(--highlight) !important;
}

/* 弹出框样式 */
.el-popper.is-pure,
.el-popper.is-light {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

.el-popper.is-pure .el-popper__arrow::before,
.el-popper.is-light .el-popper__arrow::before {
  background: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* 子菜单容器 */
.el-menu--horizontal .el-menu--popup {
  background-color: var(--card-bg) !important;
}

/* 暗色主题特定样式 */
.dark-theme .el-menu--popup,
.dark-theme .el-menu--popup .el-menu-item,
.dark-theme .el-menu--popup .el-sub-menu__title {
  background-color: var(--card-bg) !important;
  color: var(--text-primary) !important;
}

.dark-theme .el-menu--popup .el-menu-item:hover,
.dark-theme .el-menu--popup .el-sub-menu__title:hover {
  background-color: var(--tag-bg) !important;
}

.dark-theme .el-menu--popup .el-sub-menu__title {
  color: var(--text-primary) !important;
}

/* 确保子菜单箭头颜色正确 */
.dark-theme .el-sub-menu__icon-arrow {
  color: var(--text-primary) !important;
}

/* 菜单分割线 */
.dark-theme .el-menu--horizontal .el-menu .el-menu-item:not(.is-disabled):hover, 
.dark-theme .el-menu--horizontal .el-menu .el-menu-item:focus {
  background-color: var(--tag-bg) !important;
}

/* ul 列表项黑夜文字 */
.dark-theme .ul-class{
  color: var(--text-primary) !important;
}

.dark-theme strong{
  color: var(--text-primary) !important;
}

/* 文章卡片黑夜文字 */
.dark-theme .el-card{
  color: var(--text-primary) !important;
  background-color: var(--card-bg) !important;
}

.dark-theme .el-menu-item.is-active {
  color: var(--highlight) !important;
}
.dark-theme .el-dialog {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
}

.dark-theme .el-dialog .el-dialog__title{
  color: var(--text-primary) !important;
}

/* 三级菜单样式 */
.el-menu--vertical .el-menu--popup,
.el-menu--horizontal .el-menu .el-menu {
  background-color: var(--card-bg) !important;
}

.el-menu--vertical .el-menu-item,
.el-menu--horizontal .el-menu .el-menu-item {
  color: var(--text-primary) !important;
}

/* 文章预览 黑夜模式(文章背景颜色) */
.dark-theme .vuepress-markdown-body{
  background-color: #8b8b8b !important;
}

/* v-md-editor 黑夜模式(文章编辑输入框背景颜色) */
.dark-theme .v-md-editor__right-area{
  background-color: #8b8b8b !important;

}

/* v-md-editor 黑夜模式(文章编辑输入框背景颜色) */
.dark-theme .v-md-editor__editor-wrapper > div > div.scrollbar__wrap > div > div > textarea{
  background-color: #8b8b8b !important;
}


/* 搜索框黑夜模式 */
.dark-theme .el-icon{
  color: black !important;
}